<template>
	<Row class="jump_position">
		<Col span="24">
		<div class="Home">
			<Row>
				<Col span="24">
				<div class="homePageBg">
					<img src="/../static/img/homePageBg.jpg" v-bind:height="clientHeight" width="100%">
					<Row type="flex" justify="center" align="middle" class="homePageContent">
						<Col span="24">
						<div >
							<div>FIGHTING</div>
							<div>Hope is a good thing, maybe the best of things, and no good thing ever dies.</div>
						</div>
					</Col>
				</Row>
			</div>
		</Col>
	</Row>

	<Row class="jump_position">
		<Col span="24">
		<div>
			<laboratoryIntroduction></laboratoryIntroduction>
		</div>
	</Col>
</Row>

<Row class="jump_position">
	<Col span="24">
	<div>
		<projectIntroduction></projectIntroduction>
	</div>
</Col>
</Row>

<Row class="jump_position">
	<Col span="24">
	<div class="div_back">
		<MemberIntroduction></MemberIntroduction>
	</div>
</Col>
</Row>

</div>

<Row>
	<Col span="24">
	<div class="toorBarBg">
		<Row >
			<Col :xs="24" :sm="7" :md="6" :lg="8">
			<Row >
				
				<Col span="24">
				<div class="logo">Internet Front End Lab</div>
			</Col>
		</Row>
	</Col>
	<Col :xs="0" :sm="17" :md="18" :lg="16">
	<Row >
		<Col span="24">
		<div class="toorbar">
			<el-button-group>
				<span v-for="(menu,index) in homeMenu" :key="index">
					<Tooltip content="已在当前位置！" placement="bottom" :disabled="isShow">
						<el-button
						class="button"
						v-bind:type="menu.type"
						@click="jump(index)"
						v-html="menu.name">
					</el-button>
				</Tooltip>
			</span>
		</el-button-group>
	</div>
</Col>
</Row>
</Col>
</Row>
</div>
</Col>
</Row>
<Row>
	<Col span="24">
	<div>
		<UserLogin></UserLogin>
	</div>
</Col>
</Row>

</Col>
</Row>
</template>

<script>
	import {postDataToServer} from "../assets/js/post.js"
	import UserLogin from '@/components/login/UserLogin'
	import laboratoryIntroduction from '@/components/recrptionIndex/LaboratoryIntroduction'
	import projectIntroduction from '@/components/recrptionIndex/ProjectIntroduction'
	import MemberIntroduction from '@/components/recrptionIndex/MemberIntroduction'
	export default {
		name: 'Home',
		data () {
			return {
				clientHeight: '600px',
				homeMenu:[{
					name:'Our Home',
					positon:'Home',
					type:'text',
					color:'#836FFF'
				},{
					name:'Our Lab',
					positon:'Lab',
					type:'text',
					color:'#836FFF',
				},{
					name:'Our Projects',
					positon:'Projects',
					type:'text',
					color:'#836FFF'
				},{
					name:'Our Members',
					positon:'Members',
					type:'text',
					color:'#836FFF'
				}],
				isShow:true,
			}
		},
		methods:{
			jump(index){
				let jump = document.querySelectorAll('.jump_position')
				let total = jump[index].offsetTop
				let distance = document.documentElement.scrollTop || document.body.scrollTop
				let step = total / 50
				if (total > distance) {
					smoothDown()
				} else if(total == distance){
					this.isShow = false
					var _this = this
					setTimeout(function(){
						_this.noShow()
					}, 380)
				}else {
					let newTotal = distance - total
					step = newTotal / 50
					smoothUp()
				}
				function smoothDown () {
					if (distance < total) {
						distance += step
						　　　　　　　document.body.scrollTop = distance
						document.documentElement.scrollTop = distance
						setTimeout(smoothDown, 10)
					} else {
						document.body.scrollTop = total
						document.documentElement.scrollTop = total
					}
				}
				function smoothUp () {
					if (distance > total) {
						distance -= step
						　　　　　　　document.body.scrollTop = distance
						document.documentElement.scrollTop = distance
						setTimeout(smoothUp, 10)
					} else {
						document.body.scrollTop = total
						document.documentElement.scrollTop = total
					}
				} 
			},
			noShow(){
				this.isShow = true
			},
			changeToorBarTextColor(){
				for(let i=0;i < this.homeMenu.length;i++){
					this.homeMenu[i].name = '<span style=\"color:'+this.homeMenu[i].color+ '\">' + this.homeMenu[i].name.substring(0,3) + '</span>' + this.homeMenu[i].name.substring(3,this.homeMenu[0].name.length)
					// console.log(this.homeMenu[i].name )
				}
			}
		},
		components:{
			UserLogin,
			laboratoryIntroduction,
			projectIntroduction,
			MemberIntroduction
		},
		mounted(){
			this.changeToorBarTextColor();
			 // 动态设置背景图的高度为浏览器可视区域高度

		    // 首先在Virtual DOM渲染数据时，设置下背景图的高度．
		    this.clientHeight = `${document.documentElement.clientHeight}px`;
		    // console.log(this.clientHeight)
		    // 然后监听window的resize事件．在浏览器窗口变化时再设置下背景图高度．
		    const that = this;
		    window.onresize = function temp() {
		    	that.clientHeight = `${document.documentElement.clientHeight}px`;
		    }
		}
	}
</script>

<style scoped>

@font-face {
	font-family: "Scrapbooking";
	src: url("/../static/fontFamilies/Scrapbooking/Scrapbooking.woff2") format("woff2"),
	url("/../static/fontFamilies/Scrapbooking/Scrapbooking.woff") format("woff"),
	url("/../static/fontFamilies/Scrapbooking/Scrapbooking.ttf") format("truetype"),
	url("/../static/fontFamilies/Scrapbooking/Scrapbooking.eot") format("embedded-opentype"),
	url("/../static/fontFamilies/Scrapbooking/Scrapbooking.svg") format("svg");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "Distillated";
	src: url("/../static/fontFamilies/Distillated/Distillated.woff2") format("woff2"),
	url("/../static/fontFamilies/Distillated/Distillated.woff") format("woff"),
	url("/../static/fontFamilies/Distillated/Distillated.ttf") format("truetype"),
	url("/../static/fontFamilies/Distillated/Distillated.eot") format("embedded-opentype"),
	url("/../static/fontFamilies/Distillated/Distillated.svg") format("svg");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "madscrwl";
	src: url("/../static/fontFamilies/madscrwl/madscrwl.woff2") format("woff2"),
	url("/../static/fontFamilies/madscrwl/madscrwl.woff") format("woff"),
	url("/../static/fontFamilies/madscrwl/madscrwl.ttf") format("truetype"),
	url("/../static/fontFamilies/madscrwl/madscrwl.eot") format("embedded-opentype"),
	url("/../static/fontFamilies/madscrwl/madscrwl.svg") format("svg");
	font-weight: normal;
	font-style: normal;
}


.homePageBg{
	/*background: url("/../static/img/homePageBg.jpg") no-repeat;*/
	/*background-size: 100%;*/
	/*width: 100%;*/
}
.toorBarBg{
	/*height: 100%;*/
	padding-top: 2%; 
	width: 100%;
	background-color: rgba(205,197,191,0.1);
	position:fixed; 
	top:0;
	z-index: 999999;
	/*text-align: center;*/
	/*display:table;*/
	/*filter:alpha(opacity=20);  
	-moz-opacity:0.2;  
	-khtml-opacity: 0.2;  
	opacity: 0.2;  */
}
.div_back{
	height: 150%;
	width: 100%;
	background: url("/../static/img/2008729154130600_2.jpg") no-repeat; 
	background-size:100% 150%;
}
.logo{
	padding-left: 2%;
	padding-bottom: 2%;
	float: left;
	font-size: 2em;
	font-family: Scrapbooking;
	color: #2E2E2E;
	height: 100%;
	/*word-spacing: 5px;*/
}
.toorbar{
	float: right;
	font-size: 2em;
	font-family: Distillated;
	color: #404040;
	padding-right: 2%;
	/*display: none;*/
}
.button{
	padding-right: 3rem;
	color: #404040;
	outline: 0;
	font-size: 1em;
	border: none;
}
.button:hover
{
	border-bottom: solid 1px #FFF68F;
	color: #836FFF;
}
.homePageContent{
	font-family: madscrwl;
	/*height: 20px;*/
	text-align: center;
	color: white;
	font-size: 2.2em;
	position: absolute;
	width: 100%;
	top: 35%;
	/*left: 50%;*/
/*	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);*/
}


@media only screen and (max-width: 1024px) {
	.jump_position{
		font-size: 0.7rem;
	}
}

@media only screen and (max-width: 850px) {
	.jump_position{
		font-size: 0.7rem;
	}
}

@media only screen and (max-width: 750px) {
	.jump_position{
		font-size: 0.5rem;
	}
}




</style>
